<template>
    <el-card class="form-card">
        <div slot="header">
            <!-- 导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/queryPermissionByCondition' }">权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑权限</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 导航 -->
        </div>

        <!-- 编辑表单 -->
        <el-form ref="edit-form"
                 :model="form"
                 :rules="valid"
                 label-width="120px">
            <el-form-item label="权限名称：" prop="permissionName">
                <el-input v-model="form.permissionName"></el-input>
            </el-form-item>
            <el-form-item label="类型：">
                <el-select v-model="form.permissionType" placeholder="请选择权限类型"  disabled>
                    <el-option label="菜单" value="菜单"></el-option>
                    <el-option label="功能" value="功能"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权限等级：">
                <el-select v-model="form.permissionRank" placeholder="请选择权限等级">
                    <el-option v-if="form.permissionType === '菜单'" label="1" :value="1"></el-option>
                    <el-option v-if="form.permissionType === '菜单'" label="2" :value="2"></el-option>
                    <el-option v-if="form.permissionType === '功能'" label="3" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="url：">
                <el-input v-model="form.permissionUrl"></el-input>
            </el-form-item>
            <el-form-item label="父类：">
                <el-select v-model="form.parentId" placeholder="请选择父类">
                    <el-option
                        v-for="item in parentPermissions"
                        :key="item.permissionId"
                        :label="item.permissionName"
                        :value="item.permissionId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input type="number" v-model="form.permissionSort"></el-input>
            </el-form-item>
            <el-form-item label="说明：">
                <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 7}" v-model="form.permissionDesc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="onBack">返回</el-button>
            </el-form-item>
        </el-form>
        <!-- 编辑表单 -->
    </el-card>


</template>

<script>
    import {queryPermissionInfo,updatePermission,queryParentPermission} from "../../../api/permission"

    export default {
        name: "AddPermission",
        data() {
            return {
                form: {
                    permissionId: '',
                    permissionName: '',
                    permissionType: '',
                    permissionDesc: '',
                    permissionUrl: '',
                    permissionSort: 99,
                    permissionRank: 1,
                    parentId: ''
                },
                parentPermissions: [],
                valid: {              // 表单控件验证
                    permissionName: [
                        {required: true, message: '权限名不能为空', trigger: 'blur'}
                        // {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.form.permissionId = this.$route.query.permissionId
            this.loadPermissionInfo()
            // 获取父类权限信息
            this.queryAllParentPermission(this.form.permissionRank)
        },
        methods: {
            loadPermissionInfo() {
                queryPermissionInfo({
                    'permissionId': this.form.permissionId
                }).then(res => {
                    const data = res.data
                    this.form.permissionName = data.data.permissionName
                    this.form.permissionUrl = data.data.permissionUrl
                    this.form.permissionType = data.data.permissionType
                    this.form.permissionRank = data.data.permissionRank
                    this.form.permissionDesc = data.data.permissionDesc
                    this.form.permissionSort = data.data.permissionSort
                    this.form.parentId = data.data.parentId
                })
            },
            queryAllParentPermission(rank) {
                queryParentPermission({
                    'rank': rank
                }).then(res => {
                    this.parentPermissions = res.data.data
                })
            },
            onSubmit() {
                // 表单验证
                console.log(this.$refs['edit-form'].validate((valid, error) => {
                    // 验证失败
                    if (!valid) {
                        return
                    }
                    // 验证通过 ，登录操作
                    this.save()
                }))
            },
            onBack() {
                this.$router.push('/queryPermissionByCondition')
            },
            save() {
                updatePermission({
                    'permissionId': this.form.permissionId,
                    'permissionName': this.form.permissionName,
                    'permissionRank': this.form.permissionRank,
                    'permissionType': this.form.permissionType,
                    'permissionUrl': this.form.permissionUrl,
                    'permissionSort': this.form.permissionSort,
                    'parentId': this.form.parentId,
                    'permissionDesc': this.form.permissionDesc
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '保存权限成功',
                            type: 'success'
                        })
                        this.$router.push('/queryPermissionByCondition')
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
        watch: {
            'form.permissionRank': {
                handler(newValue,oldValue) {
                    if(newValue === 1){
                        this.form.parentId = null
                    }
                    // 获取父类权限信息
                    this.form.permissionRank = newValue
                    this.queryAllParentPermission(newValue)
                },
                immediate: true,     // 属性改变立即执行
                deep: true           // 监测对象属性变化执行
            }
        }
    }
</script>

<style scoped>

</style>
